<template>
  <div>
    <p class="title">课程：{{leftTemObj.label}}</p>
    <div class="handle-box">
      <el-button type="primary" class="handle-del mr10" @click="addClick">新增</el-button>
      <el-input v-model="query.kw" placeholder="请输入课程名称/创建人进行搜索" class="handle-input mr10"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="souClick">搜索</el-button>
    </div>
    <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column type="index" :index="tableIndex" label="序号" align="center" width="55"></el-table-column>
      <el-table-column prop="userName" label="课程名称"></el-table-column>
      <el-table-column prop="userName" label="创建人"></el-table-column>
      <el-table-column prop="userName" label="创建时间"></el-table-column>
      <el-table-column prop="userName" label="视频播放">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-video-play" @click="videoClick(scope.row)">播放视频</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" @click="editClick(scope.row.id)">编辑</el-button>
          <el-button type="text" icon="el-icon-delete" class="red" @click="delClick(scope.row.id)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.limit" :total="query.total"
                     :pager-count="5" @current-change="handlePageChange" @prev-click="handlePageChange" @next-click="handlePageChange">
      </el-pagination>
    </div>
    <!-- 新增编辑 -->
    <el-dialog title="课程内容" :visible.sync="classFlg" width="40%" :close-on-click-modal='false' :close-on-press-escape='false'>
      <el-form ref="rulesForm" :rules="rules" :model="classForm" label-width="80px">
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="classForm.name"></el-input>
        </el-form-item>
        <el-form-item label="课程视频" prop="videoUrl">
          <el-upload v-loading="videoUpFlg" element-loading-text="拼命上传中，切勿关闭" class="upload-demo" drag action='' accept=".mp4"
                     :before-upload="videoUp">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传MP4文件，上传文件过大时需等待</div>
          </el-upload>
          <el-button type="text">未上传视频</el-button>
          <el-button type="text" @click="videoClick">已上传视频，点击查看</el-button>
        </el-form-item>
        <template v-for="i in 2">
          <div class="pierwa">
            <el-form-item label="考点时间" prop="name">
              <el-input v-model="classForm.name" placeholder="例如：0:15"></el-input>
            </el-form-item>
            <el-form-item label="题目名称" prop="name">
              <el-input v-model="classForm.name"></el-input>
            </el-form-item>
            <el-form-item label="选项A" prop="name">
              <el-input v-model="classForm.name"></el-input>
            </el-form-item>
            <el-form-item label="选项B" prop="name">
              <el-input v-model="classForm.name"></el-input>
            </el-form-item>
            <el-form-item label="选项C" prop="name">
              <el-input v-model="classForm.name"></el-input>
            </el-form-item>
            <el-form-item label="选项D" prop="name">
              <el-input v-model="classForm.name"></el-input>
            </el-form-item>
            <el-form-item label="参考答案" prop="name">
              <el-select v-model="classForm.region" placeholder="请选择参考答案" :style="{width:' 100%'}">
                <el-option label="选项A" value="shanghai"></el-option>
                <el-option label="选项B" value="shanghai"></el-option>
                <el-option label="选项C" value="shanghai"></el-option>
                <el-option label="选项D" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </template>
        <el-button type="text"><i class="el-icon-plus"></i> 添加考点</el-button>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="classFlg = false">取 消</el-button>
        <el-button type="primary" @click="classFormClick" :loading="classLoad">确 定</el-button>
      </span>
    </el-dialog>
    <videoT ref="videoT"></videoT>
  </div>
</template>
<script>
import { RolePermissionsQX } from '../../../../api/index';
import videoT from './video.vue';
export default {
  data() {
    return {
      leftTemObj: '',
      tableData: [{}],
      query: {
        page: 1,
        limit: 10,
        kw: '',
        total: 0,
      },

      classFlg: false,
      classForm: {
        editId: '',
        name: '',
        videoUrl: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入课程名称', trigger: 'blur' },
        ],
        videoUrl: [
          { required: true, message: '请上传视频课程', trigger: 'blur' },
        ]
      },
      videoUpFlg: false,
      classLoad: false,
    }
  },
  components: {
    videoT
  },
  props: ['leftObj'],
  watch: {
    'leftObj.id': {
      handler(val) {
        this.leftTemObj = this.leftObj;
      },
      immediate: true,
    }
  },
  methods: {
    //初始化
    getList() {

    },
    //序号
    tableIndex(index) {
      return (this.query.page - 1) * this.query.limit + index + 1;
    },
    //翻页
    handlePageChange(page) {
      this.query.page = page;
      this.getList();
    },
    //搜索
    souClick() {
      this.query.page = 1;
      this.getList();
    },
    //新增
    addClick() {
      this.classFlg = true;
      this.classForm.editId = '';
      this.classForm.name = '';
      this.classForm.videoUrl = '';
    },
    //编辑
    editClick(item) {
      this.classFlg = true;
      this.classForm.editId = item.id;
      this.classForm.name = item.name;
      this.classForm.videoUrl = item.videoUrl;
    },
    //删除
    delClick(id) {
      this.$confirm('确定要删除该课程吗？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功');
      })
    },
    //提交
    classFormClick() {
      this.$refs.rulesForm.validate((valid) => {
        if (valid) {
          this.classLoad = true;
          setTimeout(() => {
            this.classLoad = false;
            this.classFlg = false;
            if (this.classForm.editId) {
              this.$message.success("编辑成功");
            } else {
              this.$message.success("新增成功");
            }
          }, 1500)
        }
      })
    },
    //上传视频
    videoUp(file) {
      console.log(file)
    },
    //点击查看上传的视频
    videoClick() {
      this.$refs.videoT.videoflg = true;
      this.$refs.videoT.mp4url = 'https://media.w3.org/2010/05/sintel/trailer.mp4';
      this.$refs.videoT.mp4StartTime = 7;
    },
  }
}

</script>
<style scoped>
.title {
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.red {
    color: #ff0000;
}
.pierwa {
    border-bottom: 1px solid #eee;
    padding-top: 18px;
}
</style>
